<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index07-事件</title>
    <style type="text/css">
        #app {
            width:200px;
            height: 200px;
            background-color: antiquewhite;
        }
        #nav > li{
            list-style: none;
            float: left;
            line-height: 40px;
            width: 70px;
            background-color: bisque;
            margin-right: 5px;
            text-align: center;
        }
        /*#nav > li:hover {*/
        /*    background-color: olive;*/
        /*}*/
    </style>
</head>
<body>
<ul id="nav">
    <li>新浪</li>
    <li>腾讯</li>
    <li>百度</li>
    <li>京东</li>
</ul>
<div id="app" style="clear: both;"></div>
<input type="button" value="隐藏"/>
<input type="button" value="显示"/><br />
<input type="text" name="username"/>
<form id="loginForm" method="post" action="#">
    用户名:<input type="text" name="uname"/><br />
    密码:<input type="password" name="password"/><br />
    <input type="submit" value="登录"/>
</form>
<script type="text/javascript" src="../scripts/jquery-3.7.0.js"></script>
<script type="text/javascript">
    $(function () {
        // $("[value=隐藏]").click(function(){
        //     console.log("单击")
        //     $("#app").hide(3000);
        // });
        // $("[value=显示]").click(function(){
        //     console.log("单击2");
        //     $("#app").show(3000);
        // });
        // 绑定聚焦事件
        // $("[name=username]").focus(function(){
        //     console.log("聚焦");
        //     // this代表当前的输入框
        //     console.log(this);
        // });
        // // 绑定离焦事件
        // $("[name=username]").blur(function(){
        //     console.log("离焦");
        //     // 获取当前输入框的值
        //     console.log(this);
        //     console.log($(this).val());
        // });
        // jquery绑定事件可以链式调用
        // $("[name=username]").focus(function(){
        //     console.log("聚焦");
        //     // this代表当前的输入框
        //     console.log(this);
        // }).blur(function(){
        //     console.log("离焦");
        //     // 获取当前输入框的值
        //     console.log(this);
        //     console.log($(this).val());
        // });
        // // 给导航的每一项绑定mouseover，mouseout
        // $("#nav > li").mouseover(function(){
        //     // this代表当前对象
        //     // console.log(this);
        //     $(this).css("background-color", "olive");
        // }).mouseout(function(){
        //     $(this).css("background-color", "bisque");
        // });
        // 表单的提交事件
        $("#loginForm").submit(function(){
            console.log("提交事件");
            // 发送ajax请求
            // 登录时需要获取到用户名和密码
            // var username = $("input[name=uname]").val().trim();
            // var password = $("input[name=password]").val().trim();
            // console.log(username);
            // console.log(password);
            // 对表单进行序列化，可以直接将表单中所有的输入域的名字和值全部获取出来
            var data = $(this).serialize();
            console.log(data);
            return false;   // 阻止表单的默认的提交行为
        });
    });
</script>
</body>
</html>